<template>
  <view>
    <view v-show="!addressShowBox">
      <!-- 头部导航栏 -->
      <view class="top-navigate bg-yellow" style="padding: 53px 10px 130px 10px;">
        <navigator class="content cuIcon-back text-xl top-navigate-title" hover-class="none"
          url="../../pages/index/index" open-type="redirect">
        </navigator>
        <view class="text-xl top-navigate-title">跑腿代购</view>
        <view class="text-grey" style="margin: 0 5px;">|</view>
        <view class="top-navigate-address text-cut" @click="selectAddress">
          {{address.name || '请选择地址'}}
        </view>
        <view class="cuIcon-right"> </view>
      </view>
      <!-- 下单 各种类型 区域-->
      <view class="buy-agent-main">
        <!-- 标题 -->
        <view class="cu-bar bg-white" style="border-radius: 10px;">
          <view class="action sub-title">
            <text class="text-xl text-bold">万能帮买</text>
            <text class="bg-yellow"></text>
          </view>
          <image src="https://mp-8cee3ddd-8bba-44f8-bd49-93f17bd9d819.cdn.bspapp.com/helper/helper.png"
            class="buy-agent-title-pic"></image>
        </view>
        <!-- 搜索框 -->
        <view class="cu-bar search bg-white">
          <view class="search-form round">
            <text class="cuIcon-search"></text>
            <input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="填写任意商品,跑腿帮你买"
              confirm-type="search"></input>
          </view>
          <view class="action">
            <button class="cu-btn bg-yellow shadow-blur round" @click="searchGoods">去下单</button>
          </view>
        </view>
        <!-- 九宫格 -->
        <view class="cu-list grid col-4 no-border">
          <view class="cu-item" v-for="(item,index) in cuIconList" :key="index">
            <view class="shop-icon" :class="[item.cuIcon]"></view>
            <text>{{item.name}}</text>
          </view>
        </view>
        <!-- 步骤 -->
        <view class="buy-agent-step">
          <image src="../../static/logo.png" style="width: 20px;height: 20px;"></image>
          <view class="cu-steps steps-arrow text-sm" style="width: 320px;">
            <view class="cu-item text-orange " v-for="(item,index) in basicsList" :key="index">
              <view class="text-grey">
                {{item.name}}
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 推荐 -->
      <view class="buy-agent-recommend">
        <!-- 标题 -->
        <view class="cu-bar bg-white" style="border-radius: 10px;">
          <view class="action sub-title">
            <text class="text-xl text-bold">校园美食</text>
            <text class="bg-yellow"></text>
          </view>
          <!-- 搜索框 -->
          <view class="cu-bar search">
            <view class="search-form round">
              <text class="cuIcon-search"></text>
              <input @blur="CityFoodsInputBlur" :adjust-position="false" type="text" placeholder="搜索你想吃的店"
                confirm-type="search"></input>
            </view>
          </view>
        </view>
        <!-- 导航栏 -->
        <scroll-view scroll-x class="nav text-left">
          <view class="cu-item" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in cityFoodsList"
            :key="index" @tap="tabSelect(index,item)" :data-id="index">
            {{item}}
          </view>
        </scroll-view>
        <!-- 美食详情推荐 -->
        <view class="cu-list grid col-2 no-border">
          <view class="cu-item" v-for="(item,index) in cityFoodsDetailList" :key="index" style="display: block;">
            <image :src="item.pic" style="width: 90%" mode="widthFix"></image>
            <view class="text-left text-lg" style="padding: 10px;font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ">{{item.name}}</view>
            <view class="mark-sales text-sm text-center">
              <view class="text-red">{{item.mark}}</view>
              <view style="padding-left: 10px;">{{item.monthSale}}</view>
              <view style="padding-left: 10px;">{{item.distance}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <my-address v-show="addressShowBox"></my-address>
  </view>
</template>

<script>
  import amap from '@/helper/amap-wx.130.js'
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  const db = uniCloud.database();
  export default {
    data() {
      return {
        amapPlugin: null,
        key: '395d7dee752cc1f00bfee27142e41f85',
        cityName: '',
        InputBottom: 0,
        //九宫格数据
        cuIconList: [{
            cuIcon: 'shop-icon-shutiao',
            name: '买吃的'
          },
          {
            cuIcon: 'shop-icon-riyongbaihuo',
            name: '日用百货'
          },
          {
            cuIcon: 'shop-icon-wujindian',
            name: '五金店'
          },
          {
            cuIcon: 'shop-icon-jiushuiyinliao-',
            name: '酒水饮料'
          },
          {
            cuIcon: 'shop-icon-shangchengshouye-dianzichanpin-01',
            name: '电子产品'
          },
          {
            cuIcon: 'shop-icon-mendianlogo',
            name: '生鲜超市'
          },
          {
            cuIcon: 'shop-icon-shangchang',
            name: '商场专柜'
          },
          {
            cuIcon: 'shop-icon-color_rizhi',
            name: '文具书籍'
          },
        ],
        basicsList: [{
            cuIcon: 'usefullfill',
            name: '填帮买信息'
          },
          {
            cuIcon: 'radioboxfill',
            name: '付跑腿费'
          },
          {
            cuIcon: 'roundclosefill',
            name: '骑手购买配送'
          },
          {
            cuIcon: 'roundcheckfill',
            name: '付商品费'
          }
        ],
        basics: 0,
        //全城美食导航栏
        TabCur: 0,
        scrollLeft: 0,
        cityFoodsList: ['美食推荐', '下午茶', '人气小吃'],
        //存放店铺数据
        cityFoodsDetailList: [],
        //收货地址信息展示
        addressShowBox: false,
      };
    },
    async mounted() {
      const {result: res}= await db.collection('shop').get();
      this.updateShopList(res.data);
      this.cityFoodsDetailList=this.shopList.filter((i)=>i.type==="美食推荐")
    },
    methods: {
      ...mapMutations('m_user', ['updateAddress']),
      ...mapMutations('m_buy', ['updateShopList']),
      //获取位置信息
      getRegeo() {
        uni.showLoading({
          title: '正在获取定位'
        });
        this.amapPlugin.getRegeo({
          success: (data) => {
            console.log(data)
            this.cityName = data[0].regeocodeData.addressComponent.city
            this.updateAddress({
              name: data[0].name,
              latitude: data[0].latitude,
              longitude: data[0].longitude,
              userName: this.userinfo.user_name,
              phone: this.userinfo.user_phone
            })
            uni.hideLoading()
          },
          fail: (err) => {
            uni.hideLoading();
            uni.showModal({
              title: '提示',
              content: '位置信息获取失败（请确定定位功能是否打开）',
              showCancel: false
            });
          },
        });
      },
      //修改地址页面展示事件
      selectAddress() {
        this.addressShowBox = true
      },
      //获取焦点
      InputFocus(e) {
        console.log(e);
      },
      //失去焦点
      InputBlur(e) {
        console.log(111);
      },
      //搜索商品
      searchGoods() {
        uni.navigateTo({
          url: '/subpkg/buy-agent-order/buy-agent-order'
        })
      },
      CityFoodsInputBlur() {
        console.log('失去焦点');
      },
      //全城美食切换导航栏事件
      tabSelect(index, item) {
        this.TabCur = index;
        this.scrollLeft = (index - 1) * 60
        this.cityFoodsDetailList=this.shopList.filter((i)=>i.type===item);
      }
    },
    computed: {
      ...mapState('m_user', ['userinfo', 'address']),
      ...mapState('m_buy', ['shopList']),
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.amapPlugin = new amap.AMapWX({
        key: this.key
      });
      //获取位置信息
      this.getRegeo();
    },
  }
</script>
 
<style lang="scss">
  .top-navigate {
    display: flex;
    justify-content: left;
    align-items: center;

    .top-navigate-title {
      margin: 0 5px;
      font-weight: bold;
    }

    .top-navigate-address {
      width: 150px;
      margin: 0 5px;
    }
  }

  .buy-agent-main {
    top: -100px;
    position: relative;
    margin: 0 10px;
    height: 320px;
    background-color: white;
    border-radius: 10px;
    padding:0 10px;

    .buy-agent-title-pic {
      width: 100px;
      height: 100px;
      position: absolute;
      right: 0px;
      top: -40px;
    }
  }

  .buy-agent-step {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 15px;
  }

  .buy-agent-recommend {
    top: -100px;
    position: relative;
    margin: 10px;
    background-color: white;
    border-radius: 10px;
    padding-bottom: 10px;

    .mark-sales {
      display: flex;
      justify-content: left;
      align-items: center;
      padding: 10px;
    }
  }
</style>